<template>
    <div class="home">
        <div class="home-banner">
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide" v-for="item in banner">
                         <a :href="item.url"><img :src="item.img" alt=""></a> 
                    </li>
                </ul>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <ul class="menu">
            <li>
                积分 <span>{{info.integral}}</span>
            </li>
            <li class="center-menu">
                <router-link to="/home/main/list">兑换记录</router-link>
            </li>
            <li class="count-control">
                兑换规则
            </li>
        </ul>
        <section class="main">
            <h3>
                积分兑好礼
            </h3>
            <ol class="main-list">
                <li v-for="(item,index) in list" :class="{'special':index%2 == 0}" @click="locationHref('/home/main/detail?id=' + item.id)">
                    <h6>{{item.title | len12}}</h6>
                    <p>试用车型：{{item.type}}</p>
                    <div class="img-res">
                        <img :src="item.img" alt="">
                    </div>
                    <div>
                        <span>{{item.integral}}</span>积分
                    </div>
                </li>
            </ol>
        </section>
        <div class="mb">
            <div class="back_blue">
                <img class="close" src="~assets/img/car/close.png" alt="">
                <h2>·&nbsp;&nbsp;&nbsp;兑换规则&nbsp;&nbsp;&nbsp;·</h2>
                <div v-html="config.process"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'home',

        data() {
            return {
                list: [],
                banner: [],
                info: {},
                config: {}
            }
        },

        components:{
            
        },

        mounted() {
            $('.count-control').click(() => {
                $('.mb').fadeIn();
            });
            $('.mb').click(e => {
                $('.mb').fadeOut();
            });
            $('.close').click(e => {
                $('.mb').fadeOut();
            });
            $('.back_blue').click(e => {
                e.stopPropagation();
            })

            let mySwiper = new Swiper('.swiper-container', {
//                loop: true,
                pagination : '.swiper-pagination',
                autoplay: 1000,
                observer: true,
                observeParents: true
            });
            this.axios.get('images').then(data => {
                this.banner = data.data;
            })

            // 获取商品信息,用户积分,兑换规则
            this.axios.get('shop').then(data => {
                this.list = data.data;
            })

            this.axios.get('user_info', {params:{
                id: localStorage.id
            }}).then(data => {
                if (data.status == 200) {
                    this.info = data.data;
                } else {
                    this.$toast('服务器异常，请重试');
                }
            })

            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .home-banner {
        height:4.15rem;
        img {
            width: 100%;
            height:4.15rem;
        }
    }
    .home {
        min-height:100vh;
        background: #F0F0F0;
        .menu {
            padding: .4rem .5rem;
            background: #fff;
            font-size: .3rem;
            color:#7C7C7C;
            margin-bottom: .25rem;
            .flex-between;
            li {
                span {
                    color: @blue;
                    font-weight: bold;
                }
                a {
                    color: inherit;
                    text-decoration: none;
                }
            }
            .center-menu {
                padding:0 .7rem;
                border-left: 1px solid @gray;
                border-right: 1px solid @gray;
            }
        }
        .main {
            background:#fff;
            h3 {
                color:@blue;
                font-size: .3rem;
                padding: .25rem .4rem;
                border-bottom: 1px solid @gray;
                margin-bottom: .1rem;
            }
            .main-list {
                .flex-between;
                padding-bottom: .5rem;
                li {
                    .box-sizing;
                    width: 50%;
                    padding: .4rem .5rem;
                    border-bottom: 1px solid @gray;
                    h6 {
                        font-size: .28rem;
                    }
                    p {
                        color: #AAAAAA;
                        font-size: .24rem;
                        margin: .15rem 0;
                    }
                    .img-res {
                        text-align: center;
                        img {
                            max-width: 100%;
                        }
                    }
                    div {
                        color: #AAAAAA;
                        margin-top: .15rem;
                        font-size: .24rem;
                        span {
                            margin-right: .1rem;
                            color: @blue;
                            font-size: .3rem;
                            font-weight: bold;
                        }
                    }
                }
                .special {
                    border-right: 1px solid @gray;
                }
            }
        }
        .mb {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 5;
            display: none;
            .back_blue {
                position: absolute;
                left:50%;
                top: 5%;
                width: 90%;
                background: #1660BD;
                color: #fff;
                padding: .4rem;
                .bor(10px);
                .box-sizing;
                .translate(-50%,0);
                font-size: .28rem;
                h2 {
                    font-size: .32rem;
                    text-align: center;
                    margin-bottom: .5rem;
                }
                img {
                    position: absolute;
                    right: .4rem;
                    top: .4rem;
                }
                // h3 {
                //     font-size: .3rem;
                // }
                // dl {
                //     dd,dt {
                //         line-height: 1.8;
                //     }
                // }
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less" type="text/css">
    .home {
        .swiper-pagination-bullet{
            background: rgba(255,255,255,1);
        }
        .swiper-pagination-bullet-active {
            background: #35539E;
        }
        .swiper-pagination-bullet {
            width: .12rem;
            height: .12rem;
        }
    }
    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: .2rem;
    }
</style>